$(function () {

  var currentPage = 1; //记录当前页 
  var pageSize = 5; // 一页五条数据
  // 1- 首页数据渲染
  // 取数据 + 模板引擎
  // 1 - ajax去后台获取用户数据
  // 2 - 用户模板引擎渲染到页面中
  function render () {
    $.ajax({
      type: 'get',
      url: '/user/queryUser',
      data: {
        page: currentPage,
        pageSize: pageSize,
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 渲染 
        $('tbody').html(template('tmp', res));
        // res.total 数据库数据真实的总数         
        setPage(res.total);
      }
    })
  }


  render();

  // 2- 禁用启用功能
  // 1 - 点击 禁用 / 启用按钮， 弹出模态框， 获取当前数据的id， 获取要进行操作
  var id = null;
  var isDelete = null;

  $('tbody').on('click', '.btn-exec', function () {
    // 获取当前数据的id
    // id = $(this).parent().attr('data-id');
    // data() jquery 提供 用于获取 date-开头的自定义属性  data('name')
    id = $(this).parent().data('id');
    // 获取要进行操作 1 启用 0 禁用
    isDelete = $(this).hasClass('btn-success') ? 1 : 0;
    console.log(id, isDelete);
  })

  // 2 - 用户点击确定操作按钮，向后台发送请求，根据id对用户进行禁用获取启用
  // 3 - 后台操作完成后，前端重新渲染，看到操作结果
  $('.btn-ok').click(function () {
    $.ajax({
      type: 'post',
      url: '/user/updateUser',
      data: {
        id: id,
        isDelete: isDelete
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        render(); //重新渲染 
        $('.modal-user').modal('hide'); //隐藏模态框
      }
    })
  })


  // 3- 分页功能 
  // 1- 分页按钮的个数，由后台数据库数据的总数决定！  生成分页之前要先获取数据库数据的总数 
  // 2- 根据总数 生成分页按钮， 实现点击切换页面功能  
  //    页码 = Math.ceil(数据总数 / 每页条数); 
  //    使用插件 生成分页按钮， 切换页面；   
  // 封装一个生成分页的方法 

  // total: 表示 数据库数据总数 
  function setPage (total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,// 默认高亮的分页按钮 
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function (event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮对应的页码
        console.log('page:', page);
        // 改变当前页取值
        currentPage = page;
        // 重新渲染 
        render();
      }
    });
  }

})